import React, { Component } from 'react';
import styles from './styles.less'
import { Modal, Form, Row, Col, Input, Table } from 'antd'
import headImg from '@/assets/HomeLayout/logo.jpg'
import { connect } from 'dva'

function mapStateToProps({ reductionModel }) {
    return {
        reductionModel: reductionModel
    }
}
@connect(mapStateToProps)
export default class Details extends Component {
    constructor(props) {
        super(props);
        this.state = {
            reductionAll: null,
            reductionData: []
        }
        this.columns = [
            {
                title: '来源/用途',
                dataIndex: 'sourceUse',
                key: 'sourceUse',
                align: 'center'
            },
            {
                title: '减排量(g)',
                dataIndex: 'carbonValue',
                key: 'carbonValue',
                align: 'center'
            },
            {
                title: '获取时间',
                dataIndex: 'createDate',
                key: 'createDate',
                align: 'center'
            },
        ]
    }

    componentDidMount() {
        this.getDetails()
    }

    componentWillUnmount() {

    }

    //下拉框筛选条件
    handleChange = () => {

    }

    //时间筛选条件
    timeOnChange = () => {

    }

    //查询员工减排明细
    getDetails = () => {
        let { modelData } = this.props
        this.props.dispatch({
            type: "reductionModel/getDetails",
            payload: {
                params: {
                    phone: modelData.phone,
                    page: 1,
                    limit: 100
                },
                callback: (item) => {
                    this.setState({
                        reductionData: item.list,
                        reductionAll: item.carbonTotal
                    })
                }
            }
        })
    }

    render() {
        let { modelOpen, modelData } = this.props
        let { reductionAll, reductionData } = this.state
        return (
            <React.Fragment>
                <Modal
                    title='详情'
                    centered
                    onCancel={() => this.props.onCancel()}
                    width={900}
                    destroyOnClose={true}
                    footer={null}
                    open={modelOpen}
                    style={{ height: 630, overflow: 'scroll' }}
                >
                    <div className={styles.title}>用户信息</div>
                    <div className={styles.cont}>
                        <img src={modelData?.avatar} />
                        <div>{modelData?.nickName}</div>
                    </div>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 5,
                        }}
                        wrapperCol={{
                            span: 19,
                        }}
                        disabled={true}
                        initialValues={{
                            name: modelData?.name,
                            address: modelData?.departmentName,
                            useNumber: modelData?.identityCard,
                            enterpriseName: modelData?.enterpriseName,
                            phone: modelData?.phone,
                            sex: modelData?.sex === 0 ? '男' : '女',
                            joinTime: modelData?.joinTime,
                            loginDate: modelData?.loginDate
                        }}
                    >
                        <Row align='middle'>
                            <Col span={12} push={0}>
                                <Form.Item
                                    label="姓名"
                                    name="name"
                                >
                                    <Input />
                                </Form.Item>
                            </Col>
                            <Col span={12} push={0}>
                                <Form.Item
                                    label="所属企业"
                                    name="enterpriseName"
                                >
                                    <Input />
                                </Form.Item>
                            </Col>
                            {/* <Col span={12} push={0}>
                                <Form.Item
                                    label="身份证号"
                                    name="useNumber"
                                >
                                    <Input />
                                </Form.Item>
                            </Col> */}
                            <Col span={12} push={0}>
                                <Form.Item
                                    label="所属部门"
                                    name="address"
                                >
                                    <Input />
                                </Form.Item>
                            </Col>
                            <Col span={12} push={0}>
                                <Form.Item
                                    label="手机号"
                                    name="phone"
                                >
                                    <Input />
                                </Form.Item>
                            </Col>
                            {/* <Col span={12} push={0}>
                                <Form.Item
                                    label="性别"
                                    name="sex"
                                >
                                    <Input />
                                </Form.Item>
                            </Col> */}
                            <Col span={12} push={0}>
                                <Form.Item
                                    label="加入时间"
                                    name="joinTime"
                                >
                                    <Input />
                                </Form.Item>
                            </Col>
                            <Col span={12} push={0}>
                                <Form.Item
                                    label="上次登录时间"
                                    name="loginDate"
                                >
                                    <Input />
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                    <div className={styles.title}>减排明细</div>
                    <div className={styles.reductionAll}>累计减排量：{reductionAll}g</div>
                    <Table
                        // scroll={{ y: 'calc(100vh - 280px)' }}
                        pagination={false}
                        columns={this.columns}
                        dataSource={reductionData}
                    />
                </Modal>

            </React.Fragment >
        );
    }
}
